<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 
			 v-for 类似java中foreach循环，
			 in后面是集合名称
			 o代表每次遍历的当前值
			 o,i o代表当前行内容;i代表当前索引值，注意顺序,
			 Vue定死顺序------即前一个必定是行内容，后一个必定是索引值与名称无关
			 -->
			<p v-for="o in hobby" >{{o}}</p>
			<p v-for="o , i in hobby" >{{i}}---{{o}}</p>
			<p v-for="i , o in hobby" >{{i}}---{{o}}</p>
		</div>
		
	</body>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				hobby:["乒乓球","篮球","羽毛球"]
			}
		});
	</script>
</html>
